<template>
  <div class="oilOrder">
    <c-title :hide="false" text="加油订单"></c-title>
    <van-tabs v-model="active" line-width="30px" @change="tabChange">
      <van-tab title="全部"></van-tab>
      <van-tab title="待付款"></van-tab>
      <van-tab title="已支付"></van-tab>
    </van-tabs>
    <div class="orderList" v-for="(item, index) in list" :key="index">
      <van-cell title-style="flex:2;">
        <template #title>
          <div style="text-align: left">订单号：{{ item.order_sn }}</div>
        </template>
        <template #default>
          <div style="font-weight: 500; font-size: 0.81rem; color: #00001c">
            {{ item.status_name }}
          </div>
        </template>
      </van-cell>
      <van-cell :border="false">
        <template #title>
          <div class="custom-title">时间</div>
        </template>
        <template #default>
          <div class="custom-value">{{ item.create_time }}</div>
        </template>
      </van-cell>
      <van-cell :border="false" v-if="item.oil_station_order && item.oil_station_order.plate_num">
        <template #title>
          <div class="custom-title">车牌号</div>
        </template>
        <template #default>
          <div class="custom-value">{{ item.oil_station_order.plate_num }}</div>
        </template>
      </van-cell>
      <van-cell :border="false" v-if="item.oil_name">
        <template #title>
          <div class="custom-title">油品名</div>
        </template>
        <template #default>
          <div class="custom-value">{{ item.oil_name }}</div>
        </template>
      </van-cell>
      <van-cell :border="false" v-if="item.oil_station_order && item.oil_station_order.oil_gun">
        <template #title>
          <div class="custom-title">油枪</div>
        </template>
        <template #default>
          <div class="custom-value">{{ item.oil_station_order.oil_gun }}</div>
        </template>
      </van-cell>
      <van-cell :border="false" v-if="item.oil_station_order && item.oil_station_order.litre_price">
        <template #title>
          <div class="custom-title">单价</div>
        </template>
        <template #default>
          <div class="custom-value">{{ item.oil_station_order.litre_price }}</div>
        </template>
      </van-cell>
      <van-cell :border="false" v-if="item.oil_station_order && item.oil_station_order.litre">
        <template #title>
          <div class="custom-title">升数</div>
        </template>
        <template #default>
          <div class="custom-value">{{ item.oil_station_order.litre }}</div>
        </template>
      </van-cell>
      <van-cell :border="false" v-if="item.order_goods_price">
        <template #title>
          <div class="custom-title">合计金额</div>
        </template>
        <template #default>
          <div class="custom-value">{{ item.order_goods_price }}</div>
        </template>
      </van-cell>
      <van-cell :border="false" v-if="item.discount_price || item.deduction_price">
        <template #title>
          <div class="custom-title">优惠金额</div>
        </template>
        <template #default>
          <div class="custom-value">{{ (Number(item.discount_price) + Number(item.deduction_price)).toFixed(2) }}</div>
        </template>
      </van-cell>
      <van-cell :border="false" v-if="item.price">
        <template #title>
          <div class="custom-title">支付金额</div>
        </template>
        <template #default>
          <div class="custom-value">{{ item.price }}</div>
        </template>
      </van-cell>
      <van-cell :border="false" v-if="item.pay_type_name">
        <template #title>
          <div class="custom-title">支付渠道</div>
        </template>
        <template #default>
          <div class="custom-value">{{ item.pay_type_name }}</div>
        </template>
      </van-cell>
      <div class="buttonBox">
        <div class="btn" @click="operation(items, item)" v-for="(items, index) in item.button_models" :key="index">{{ items.name }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      active: 0,
      urlStr: "",
      list: [],
      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  activated() {
    this.active = Number(this.$route.params.status);
    if (this.active == 0) {
      this.urlStr = "plugin.store-oil-station.frontend.order-list.index";
    } else if (this.active == 1) {
      this.urlStr = "plugin.store-oil-station.frontend.order-list.wait";
    } else {
      this.urlStr = "plugin.store-oil-station.frontend.order-list.complete";
    }
    this.init();
    this.getData();
  },
  methods: {
    operation(btn, order) {
      // btn = {name: "确认发货", value: 24, api: "plugin.supplier.frontend.order.cancel-send"};
      if (!btn.api && btn.value != "41") {
        if (btn.value == "expediting_delivery") {
          Toast("已提醒过商家");
        }
        return;
      }

      this.orderPayId = order.id;
      if (btn.value == 1 || btn.value == "snatch_regiment_pay") {
        this.toPay(order, btn);
      } else if (btn.value == 13 || btn.value == 54 || btn.value == "snatch_regiment_refund") {
        //退款
        this.toRefund(order, btn);
      } else {
        this.publicMessage(order, btn, btn.name);
      }
    },
    toPay(item, btn) {
      //status-2合并支付 type-1订单支付
      if (item.plugin_id == 71) {
        this.$router.push(
          this.fun.getUrl(
            "orderpay",
            {
              status: 2,
              order_ids: item.id,
              iscps: true
            },
            { api: btn.api }
          )
        );
        return;
      }
      if (item.plugin_id == 154) {
        this.$router.push(
          this.fun.getUrl(
            "orderpay",
            {
              status: 2,
              order_ids: item.id
            },
            {
              tag: "tourAround",
              api: btn.api,
              ordersn: item.order_sn
            }
          )
        );
        return;
      }
      this.$router.push(
        this.fun.getUrl(
          "orderpay",
          {
            status: 2,
            order_ids: item.id,
            orderType: this.$route.params.orderType
          },
          { api: btn.api }
        )
      );
    },
    //退款
    toRefund(item, btn) {
      this.$router.push(
        this.fun.getUrl(
          "refund",
          {
            order_id: item.id,
            order_type: 1
          },
          { value: btn.value }
        )
      );
    },
    publicMessage(order, btn, text) {
      let _text = text || "";
      if (!btn.api) {
        return;
      }
      this.$dialog
        .confirm({ message: `确定${_text}?` })
        .then(() => {
          var that = this;
          let json = {
            order_id: that.orderPayId
          };
          let urls = btn.api || "";
          if (that.noMoreClick) {
            return;
          }
          that.noMoreClick = true;
          $http.get(urls, json).then(
            response => {
              that.noMoreClick = false;
              if (response.result == 1) {
                that.$emit("ConfrimOrderNotification", "pay");
                that.$notify({
                  background: "#f0f9eb",
                  message: `${_text}成功`,
                  color: "#67c23a"
                });
                this.init();
                this.getData();
              } else {
                that.$dialog.alert({ message: response.msg });
              }
            },
            function (response) {
              that.noMoreClick = false;
              console.log(response);
            }
          );
        })
        .catch(() => {});
    },
    tabChange() {
      if (this.active == 0) {
        this.urlStr = "plugin.store-oil-station.frontend.order-list.index";
      } else if (this.active == 1) {
        this.urlStr = "plugin.store-oil-station.frontend.order-list.wait";
      } else {
        this.urlStr = "plugin.store-oil-station.frontend.order-list.complete";
      }
      this.init();
      this.getData();
      console.log(this.active);
    },
    init() {
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
    },
    async getData() {
      let { data, msg, result } = await $http.post(this.urlStr, { page: this.page }, "");
      if (result) {
        this.list = data.data;
        this.total_page = data.last_page;
        if (!this.total_page) {
          this.total_page = 0;
        }
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let { data, result } = await $http.post(this.urlStr, { page: this.page }, "");
        this.isLoadMore = true;
        if (result) {
          this.list = this.list.concat(data.data);
        } else {
          this.page = this.page - 1;
          this.isLoadMore = false;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.oilOrder {
  padding-bottom: 2rem;
  .orderList {
    box-sizing: border-box;
    margin: 0.625rem 0.75rem;
    background: #fff;
    padding: 0 0 0.5rem 0;
    box-sizing: border-box;
    border-radius: 0.5rem;
    .van-cell {
      padding: 10px 0.63rem;
      border-radius: 0.5rem;
    }
    .custom-title {
      font-size: 0.81rem;
      color: #6e6e79;
      text-align: left;
    }
    .custom-value {
      font-weight: 500;
      font-size: 0.81rem;
      color: #00001c;
    }
    .buttonBox {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      background: #fff;
      padding: 0 0.625rem;
      .btn {
        font-size: 0.875rem;
        color: #ffffff;
        padding: 0.5rem 1.25rem;
        background: #f15353;
        border-radius: 2rem;
        min-width: 94px;
        margin-left: 14px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
